<template>
	<view>
		<view class="item-box" @tap="orderTap">
			<view class="z-margin-b-24 item-each">
				<view class="floor-1 z-flex-c-s-b z-padding-lr-32 z-padding-t-24">
					<view class="pica-t">{{ info.shop_id > 0 ? '商家派单' : '平台派单' }}</view>

					<view>
						<text class="t-red" v-if="info.is_service === 1">售后中</text>
						<text class="t-red" v-else-if="info.is_service === 2">已退款 ¥{{ info.refund_price }}</text>
						<text class="after-sale" v-else-if="info.status === 1">待接单</text>
						<text class="after-sale" v-else-if="info.status === 2">待出发</text>
						<text class="after-sale" v-else-if="info.status === 3">已出发</text>
						<text class="after-sale" v-else-if="info.status === 4">已到达</text>
						<text class="after-sale" v-else-if="info.status === 5">服务中</text>
						<text class="after-sale" v-else-if="info.status === 6">已完成</text>
						<text class="after-sale" v-else-if="info.status === 7">已评价</text>
					</view>
				</view>
				<view class="z-margin-t-16 z-padding-l-32">
					<text class="time-date">{{ info.starttime | date('mm:dd') }}</text>
					<text class="z-margin-l-16 time-hour theme-color">{{ info.starttime | date('hh:MM') }}</text>
				</view>
				<!-- 项目 -->
				<view class="z-padding-24 z-flex-c-s-b z-margin-t-24 items">
					<view class="z-flex">
						<image class="img-box z-margin-r-24" :src="cdn(info.orderDetail.image)" mode="aspectFill"></image>
						<view>
							<view class="item-title z-padding-b-24">{{ info.orderDetail.name }}</view>
							<text class="item-tab" v-if="info.orderDetail.sku_name">{{ info.orderDetail.sku_name }}</text>
						</view>
					</view>
					<view>
						<view class="item-price z-padding-b-24">
							￥
							<text class="z-font-30">{{ info.orderDetail.price }}</text>
						</view>
						<view class="item-number">x{{ info.orderDetail.num }}</view>
					</view>
				</view>
				<!-- 地址 -->
				<view>
					<view class="z-padding-t-32 z-padding-lr-32 server-text">
						<text class="text-b">服务地址：</text>
						{{ info.address.city }} {{ info.address.area }}
					</view>

					<view class="z-padding-lr-32 z-padding-t-24 server-text">
						<text class="text-b">用户备注：</text>
						{{ info.memo }}
					</view>
				</view>
				<view class="z-margin-t-32 wire"></view>

				<view class="z-padding-tb-30 z-padding-lr-32 z-flex-c">
					<view>
						<text class="total z-font-22">合计：</text>
						<text class="unit z-font-22">￥</text>
						<text class="total-prices z-font-36">{{ info.payprice }}</text>
					</view>
					<view class="z-flex-1"></view>
					<view class="z-btn receive z-font-22" @tap.stop="orderBtnTap(1)" v-if="info.is_service <= 0 && info.status === 1 && !info.skill_id">立即抢单</view>
					<view class="z-btn receive z-font-22" @tap.stop="orderBtnTap(2)" v-else-if="info.is_service <= 0 && info.status === 1 && info.skill_id">
						立即接单
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:['info'],
	data() {
		return {};
	},
	methods: {
		orderBtnTap(e) {
			this.$emit('orderBtnTap', { info: this.info, type: e })
			
		},
		orderTap(e) {
			this.$emit('orderTap', this.info)
		}
	}
};
</script>

<style>
.item-box {
	width: 686rpx;
	/* height: 701rpx; */
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}

.pica-t {
	font-size: 24rpx;
	font-weight: 500;
	color: #a4a9b7;
}

.after-sale {
	font-size: 24rpx;
	font-weight: 500;
	color: #1c274c;
}

.t-red {
	font-size: 24rpx;
	font-weight: 500;
	color: #ff2121;
}

.time-date {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}

.time-hour {
	font-size: 30rpx;
	font-weight: bold;
	display: inline-block;
}

.items {
	width: 574rpx;
	height: 120rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}

.img-box {
	width: 120rpx;
	height: 120rpx;
	background: #d9d9d9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}

.item-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}

.item-tab {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
	background-color: #ffffff;
	padding: 5rpx 12rpx;
}

.item-price {
	font-size: 22rpx;
	font-weight: 500;
	color: #ff9600;
}

.item-number {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
	text-align: right;
}

.server-text {
	font-size: 22rpx;
	font-weight: bold;
	color: #a4a9b7;
}

.text-b {
	color: #1c274c;
}

.wire {
	width: 622rpx;
	height: 0rpx;
	opacity: 1;
	border: 1rpx solid rgba(164, 169, 183, 0.2);
	margin: auto;
}

.total {
	color: #a4a9b7;
}

.unit {
	color: #ff9600;
}

.total-prices {
	color: #ff9600;
	font-weight: bold;
}

.receive {
	width: 160rpx;
	height: 56rpx;
}
</style>
